<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<!--  <link rel="stylesheet" type="text/css" href="semantic/dist/semantic.min.css"> -->
<style>
/* 會放大拉長，是 bug ，修正方法如下，參考: https://github.com/Semantic-Org/Semantic-UI/issues/2948 */
.ui.comments .comment img.avatar,
.ui.comments .comment .avatar img {
  display: block;
  margin: 0em auto;
  width: 100%;
  height: auto; /* 100% doesn't work but auto does */
  border-radius: @avatarBorderRadius;
}
</style>
</head>
<body>
  <div class="ui comments">
    <h3 class="ui dividing header">Comments</h3>
    <div class="comment">
        <a class="avatar"><img src="images/matt.jpg"></a>
        <div class="content">
          <a class="author">Matt</a>
          <div class="metadata">
              <span class="date">Today at 5:42PM</span>
          </div>
          <div class="text">
              How artistic!
          </div>
          <div class="actions">
              <a class="reply">Reply</a>
          </div>
        </div>
    </div>
    <div class="comment">
        <a class="avatar"><img src="images/elliot.jpg"></a>
        <div class="content">
          <a class="author">Elliot Fu</a>
          <div class="metadata">
              <span class="date">Yesterday at 12:30AM</span>
          </div>
          <div class="text">
              <p>This has been very useful for my research. Thanks as well!</p>
          </div>
          <div class="actions">
              <a class="reply">Reply</a>
          </div>
        </div>
        <div class="comments">
          <div class="comment">
              <a class="avatar">
              <img src="images/jenny.jpg">
              </a>
              <div class="content">
              <a class="author">Jenny Hess</a>
              <div class="metadata">
                  <span class="date">Just now</span>
              </div>
              <div class="text">
                  Elliot you are always so right :)
              </div>
              <div class="actions">
                  <a class="reply">Reply</a>
              </div>
              </div>
          </div>
        </div>
    </div>
    <div class="comment">
        <a class="avatar">
        <img src="images/joe.jpg">
        </a>
        <div class="content">
        <a class="author">Joe Henderson</a>
        <div class="metadata">
            <span class="date">5 days ago</span>
        </div>
        <div class="text">
            Dude, this is awesome. Thanks so much
        </div>
        <div class="actions">
            <a class="reply">Reply</a>
        </div>
        </div>
    </div>
    <form class="ui reply form">
        <div class="field">
        <textarea></textarea>
        </div>
        <div class="ui blue labeled submit icon button">
        <i class="icon edit"></i> Add Reply
        </div>
    </form>
    </div>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--  <script src="semantic/dist/semantic.min.js"></script> -->
</body>
</html>